<template>
	<div class="login-page">
		<button @click="avatr" class="avatar-label">修改头像</button>
		<Loading ref="loading" />
		<button @click="logout" class="logout-btn">退出登录</button>
	</div>
</template>

<script>
	import Loading from '@/components/Loading.vue';
	export default {
		components: {
			Loading
		},
		data() {
			return {
				uploadStatus: '', // 用于记录上传状态
				file: null, // 保存选择的文件
				avatarUrl: uni.getStorageSync('avatarUrl') || '' // 尝试从本地存储获取已保存的头像URL
			};
		},
		methods: {
			// 退出登录功能
			logout() {
				uni.clearStorage({
					success: function() {
						console.log('清空所有存储的数据');
					}
				});
				uni.showToast({
					title: '退出成功',
					icon: 'success',
					duration: 2000
				});
				uni.reLaunch({
					url: '/pages/tabbar/tabbar-1/tabbar-1'
				});
			},
			uploadFile(){
				if (!this.file) {
					uni.showToast({
						title: '请先选择文件',
						icon: 'none'
					});
					return;
				}
				// 假设这里使用uni.uploadFile来上传文件
				uni.uploadFile({
					url: 'http://14.103.233.198:9999/upload_image', // 替换为您的上传接口
					filePath: this.file,
					name: 'file',
					formData: {
						uid:uni.getStorageSync('uid')
					},
					success: (uploadFileRes) => {
						// 上传成功后，更新上传状态并隐藏加载动画
						console.log(uploadFileRes.statusCode);
						if (uploadFileRes.statusCode==200){
							uni.showToast({
								title: '修改成功',
								icon: 'success'
							});
							uni.reLaunch({
								url:"/pages/tabbar/tabbar-5/tabbar-5"
							})
						}else{
							uni.showToast({
								title: '修改失败',
								icon: 'error'
							});
						}
					},
					fail: (err) => {
						console.error('修改失败：', err);
						uni.showToast({
							title: '修改失败',
							icon: 'error'
						});
					}
				});
			},
			avatr() {
				console.log("avatr");
				const self = this; // 保存对 Vue 实例的引用
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					fileType: ['image'],
					success: function(res) {
						if (res.tempFilePaths) {
							// 选择文件成功后，保存文件路径
							self.file = res.tempFiles[0].path;
							self.uploadFile();
						}
					},
				});
			},
		}
	};
</script>

<style scoped>
	.login-page {
		text-align: center;
		margin-top: 100px;
	}

	.logout-btn {
		padding: 10px 20px;
		background-color: #f56c6c;
		color: white;
		border: none;
		border-radius: 5px;
		cursor: pointer;
		font-size: 16px;
		margin-bottom: 20px;
	}

	.logout-btn:hover {
		background-color: #f44336;
	}

	.avatr-btn {
		padding: 10px 20px;
		background-color: #d5d5d5;
		color: white;
		border: none;
		border-radius: 5px;
		cursor: pointer;
		font-size: 16px;
		margin-bottom: 20px;
	}

	.avatr-btn:hover {
		background-color: #d5d5d5;
	}
</style>